<template>
    <el-card>
        <template #header>
            <div style="display: flex; justify-content: space-between;">
                <h4>修改密码</h4>
                <el-button link @click="$emit('update:tab','')">
                    <el-icon>
                        <Close/>
                    </el-icon>
                </el-button>
            </div>
        </template>
        <el-form label-position="top" status-icon scroll-to-error
                 :model="formPassword" :rules="rules"
        >
            <el-form-item prop="currentPassword">
                <template #label>
                    <h5 style="display: inline">当前密码</h5>
                </template>
                <el-input style="width: 26em" placeholder="请输入当前密码" show-password clearable
                          v-model="formPassword.currentPassword"/>
            </el-form-item>
            <el-form-item prop="newPassword">
                <template #label>
                    <h5 style="display: inline">新密码</h5>
                </template>
                <el-input style="width: 26em" placeholder="密码长度6到32位且不能和当前密码相同" show-password clearable
                          v-model="formPassword.newPassword"/>
            </el-form-item>
            <el-form-item prop="confirmPassword">
                <template #label>
                    <h5 style="display: inline">确认密码</h5>
                </template>
                <el-input style="width: 26em" placeholder="确认密码和新密码保持一致" show-password clearable
                          v-model="formPassword.confirmPassword"/>
            </el-form-item>
        </el-form>
        <div style="text-align: right">
            <el-button type="success" @click="finished">完成</el-button>
        </div>
    </el-card>
</template>

<script setup>
import {reactive} from 'vue'
import {Close} from "@element-plus/icons-vue";

import {useUserStore} from "@/stores/user";
const userStore = useUserStore()

import {updateAccountPasswordApi} from "@/apis/account";

const emits = defineEmits(["update:tab"])

const formPassword = reactive({
    currentPassword: "",
    newPassword: "",
    confirmPassword: ""
})
const rules = ({
    currentPassword: [
        {required: true, message: '请输入当前密码!', trigger: ['blur', 'change']},
    ],
    newPassword: [
        {required: true, message: '请输入新密码!', trigger: ['blur', 'change']},
        {min:6, max:32, message: "密码长度要在6~32位!", trigger: ['blur', 'change']},
        {
            validator: (rule, value) => formPassword.currentPassword !== value,
            message: "新密码和当前密码不能相同！",
            trigger: ['blur', 'change']
        }
    ],
    confirmPassword: [
        {required: true, message: '请输入确认密码', trigger: ['blur', 'change']},
        {
            validator: (rule, value) => formPassword.newPassword === value,
            message: "确认密码错误！",
            trigger: ['blur', 'change']
        }
    ],
})

const finished = async () => {
    await updateAccountPasswordApi(formPassword.currentPassword, formPassword.confirmPassword)
    ElMessageBox.alert("密码修改成功，请重新登录！", "提示", {
        confirmButtonText: "确定",
        type: "success",
    }).finally(()=>userStore.reset())
}
</script>

<style scoped lang="scss">
.yellow-message {
    padding: 1em 2em;
    background-color: #FFF8DB;
    font-size: 0.8em;
    color: #B58105;
    box-shadow: 0px 0px 0px 1px #b58105 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
    margin-bottom: 2em;
    border: 1px solid #e3e9ed;
    border-radius: 4px;
}
</style>